<template>
  <div class="dashboard-container">
    <div class="header">
      <el-card>
        <div class="header-container">
          <div>VUE3-admin 欢迎你</div>
          <el-button type="primary" v-print="printObj">测试打印</el-button>
        </div>
      </el-card>
    </div>
    <div id="print-box" class="print-box">
      <!-- 数据卡片 -->
      <div class="datacard-container">
        <el-row :gutter="40">
          <el-col :xs="24" :sm="12" :lg="6" v-for="item in dataList">
            <DataCard
              :key="item.id"
              :end-val="item.num"
              :icon="item.icon"
              :title="item.title"
              :icon-color="item.iconColor"
            ></DataCard>
          </el-col>
        </el-row>
      </div>
      <!-- echarts -->
      <div class="echarts-container">
        <el-row :gutter="40">
          <el-col :xs="24" :sm="24" :lg="12" class="row">
            <el-card>
              <BarEcharts height="400px" width="100%" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card>
              <PieEcharts height="400px" width="100%" />
            </el-card>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-card>
              <template #header> 全国空气质量分布图 </template>
              <MapEcharts height="400px" width="100%" />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DataCard from "@/components/DataCard/index.vue";
import BarEcharts from "./components/BarEcharts.vue";
import PieEcharts from "./components/PieEcharts.vue";
import MapEcharts from "./components/MapEcharts.vue";
import { ref } from "vue";
const dataList = ref([
  {
    id: 0,
    num: 2000,
    icon: "money",
    iconColor: "#F4516C",
    title: "消息数",
  },
  {
    id: 1,
    num: 3000,
    icon: "redis",
    iconColor: "#40C9C6",
    title: "访问数",
  },
  {
    id: 2,
    num: 1500,
    iconColor: "#36A3F7",
    icon: "chart",
    title: "消息数",
  },
  {
    id: 3,
    num: 1300,
    iconColor: "#FFC0CB",
    icon: "table",
    title: "访问数",
  },
]);

// 打印相关
const printLoading = ref<Boolean>(false);
const printObj = {
  // 打印区域
  id: "print-box",
  // 打印标题
  popTitle: "vue3-admin",
  // 打印前
  beforeOpenCallback(v: any) {
    printLoading.value = true;
  },
  // 执行打印
  openCallback(v: any) {
    printLoading.value = false;
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .header {
    margin-bottom: 30px;
    &-container {
      display: flex;
      justify-content: space-between;
    }
  }
}

.print-box {
  .datacard-container {
    margin-bottom: 20px;
  }

  .echarts-container {
    .row {
      margin-bottom: 30px;
    }
  }
}
</style>
